<!--
 * @Author: your name
 * @Date: 2022-03-27 20:05:42
 * @LastEditTime: 2022-03-27 20:19:49
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\me\components\createblog.vue
-->
<template>
  <el-dialog
    title="新建博客:"
    :visible="createDialogVisible"
    width="70%"
    :before-close="closeDialog"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="ms-content"
    >
      <el-form-item prop="article_title" label="文章标题:">
        <el-input v-model="form.article_title" placeholder="请输入文章标题">
        </el-input>
      </el-form-item>
      <el-form-item label="文章照片:" prop="cover_img">
        <Upload
          :limit="2"
          :isImgLoadModel="true"
          v-if="!uploadImgsPreview.length"
          @success="uploadSuccessCallback($event)"
        >
        </Upload>
        <Preview-img
          :uploadImgsPreview="uploadImgsPreview"
          @deleteImg="deleteImg"
        ></Preview-img>
      </el-form-item>
      <!-- 文章标签 -->
      <el-form-item label="文章标签:" prop="label_name">
        <el-select v-model="form.label_name" placeholder="请选择活动区域">
          <el-option
            v-for="item in labelList"
            :label="item.label_name"
            :value="item.label_name"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 模板内容 -->
      <el-form-item prop="article" label="博文内容">
        <mavon-editor
          ref="md"
          placeholder="请输入文档内容..."
          :boxShadow="false"
          v-model="form.article"
          class=""
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">返回</el-button>
      <el-button @click="submit(0)" type="success">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入上传的组件
import Upload from '@/components/upload/upload'
// 导入图片预览组件
import PreviewImg from '@/components/PreviewImg/Previewimg'
// 获取所有的标签
import { getLabelList } from '@/api/label'
// 发布博文接口 releaseBlog
import { releaseBlog } from '@/api/blog'
export default {
  name: 'create-dialog',
  components: {
    Upload,
    PreviewImg
  },
  props: {
    createDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        article_title: '',
        article: '',
        cover_img: '',
        label_name: ''
      },
      labelList: [],
      uploadImgsPreview: [],
      rules: {
        // username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        // password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {
    getLabelList().then((res) => {
      console.log('标签', res)
      this.labelList = res.result
    })
  },
  methods: {
    closeDialog() {
      this.resetForm()
      this.uploadImgsPreview = []
      this.$emit('update:createDialogVisible', false)
    },
    // 删除图片的
    deleteImg() {
      this.uploadImgsPreview = []
    },
    uploadSuccessCallback(e) {
      console.log('成功的回调', e)
      this.form.cover_img = e.imgUrl
      this.uploadImgsPreview.push(e.imgUrl)
    },
    submit() {
      console.log('提交')
      releaseBlog({ ...this.form }).then((res) => {
        console.log('res', res)
        if (res.code == 200) {
          this.$message.success('提交成功')
          this.closeDialog()
        }
        this.uploadImgsPreview = []
      })
    },
    // 重置表单 和 校验
    resetForm() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
// /deep/ .el-dialog__header {
//   display: none;
// }
/deep/ .el-dialog__body {
  padding: 20px 30px;
  height: 60vh;
  overflow-y: auto;
}
</style>
